<template>
	<view class="c-avatar" :class="{full:size}">
		<view v-if="avatarSrc" class="image" :class="{circle:circle,fillet:fillet}" :style="{backgroundImage: 'url(' + avatarSrc + ')'}"></view>
		<image v-else class="image" :class="{circle:circle,fillet:fillet}" src="../../static/sns/ry_avatar.png"></image>
	</view>

</template>

<script>
	export default {
		props: {
			user: {},
			size:false
		},
		computed: {
			url() {
				// debugger
				if (!this.user || !this.user.id) {
					return
				}
				const avatarSrc = this.user.avatar ?
					typeof this.user.avatar === 'string' ?
					this.user.avatar :
					this.user.avatar.url :
					''
				
				this.avatarSrc = avatarSrc;
				// this.id = this.user.id
			},
		},
		data() {
			return {
				circle: true,
				fillet: false,
				avatarSrc: '',
				id: 0
			};
		}
	}
</script>

<style lang="scss">
	@import '../../var';

	.c-avatar {
		position: relative;
		width: 54rpx;
		height: 54rpx;

		&.lg {
			width: 84rpx;
			height: 84rpx;
		}

		&.xl {
			width: 120rpx;
			height: 120rpx;
		}

		&.s {
			width: 48rpx;
			height: 48rpx;
		}

		&.sm {
			width: 40rpx;
			height: 40rpx;
		}

		&.full {
			width: 100%;
			height: 100%;
		}

		.vip {
			position: absolute;
			top: -10%;
			left: -10%;
			width: 40%;
			height: 40%;
		}

		.image {
			display: block;
			width: 100%;
			height: 100%;
			background: $bgcolor-gray center / cover no-repeat;

			&.circle {
				//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
				border-radius: 1000rpx;
			}

			&.fillet {
				width: 100%;
				height: 100%;
				//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
				border-radius: 10rpx;
			}
		}
	}
</style>
